<template>
  <div class="app-container">
    <el-card>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="110px">
        <title-line title="基本信息" />
        <el-form-item class="m-t" label="图标名称" prop="iconName">
          <el-input
            class="form-input-large"
            placeholder="请输入金刚区名称（1-5）"
            v-model.trim="formData.iconName"
            :onkeyup="(formData.iconName = formData.iconName.replace(/[ ]/g, ''))"
            maxlength="5"
            show-word-limit
            style="width: 300px"
          >
          </el-input>
        </el-form-item>
        <el-form-item class="m-t" label="图标样式" prop="iconUrl">
          <upload-image
            :isShowTip="true"
            :lazy="true"
            :file-type="['jpg', 'png', 'jpeg']"
            file-pixel="80*80"
            :file-size="1"
            :limit="1"
            :response-fn="handleAvatarUrlResponse"
            @on-change="uploadAvatarUrlChange($event, 'iconUrl')"
            v-model="formData.iconUrl"
          />
        </el-form-item>
        <el-form-item class="m-t" label="指向位置" prop="pointType">
          <el-radio-group v-model="formData.pointType" @change="handleChange">
            <div class="flex align-center" style="height: 36px">
              <el-radio :label="1">暂不指定</el-radio>
            </div>
            <div class="mt-10 flex align-center" style="height: 36px">
              <el-radio :label="2">指向路径</el-radio>
              <el-input
                class="form-input-large"
                style="margin-left: 5px"
                v-if="formData.pointType === 2"
                placeholder="请输入指向路径"
                @input="urlChange"
                v-model="formData.iconPoint"
              >
              </el-input>
            </div>
            <div class="mt-10 flex align-center" style="height: 36px">
              <el-radio :label="3">指向第三方平台</el-radio>
              <el-select
                v-model="formData.outsideType"
                style="margin-right: 24px"
                :disabled="formData.pointType !== 3"
                class="form-input-large"
                placeholder="请选择第三方平台"
              >
                <el-option
                  v-for="item in outsideType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span v-if="formData.outsideType" style="font-size: 14px; width: 83px">路径：</span>
              <el-input
                v-if="formData.outsideType"
                class="form-input-large"
                style="margin-left: 5px"
                placeholder="请输入指向路径"
                @input="urlChange"
                v-model="formData.iconPoint"
              ></el-input>
            </div>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="m-t" prop="iconSort" label="排序位置">
          <el-input-number
            class="form-input-large"
            :min="1"
            :max="9999"
            :step-strictly="true"
            controls-position="right"
            v-model="formData.iconSort"
          ></el-input-number>
          <span class="explain">数字越小排序越靠前</span>
        </el-form-item>
        <el-form-item class="m-t" label="固定入口" prop="isFixed">
          <el-radio-group v-model="formData.isFixed">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="m-t" label="是否启用" prop="isEnable">
          <el-radio-group v-model="formData.isEnable">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="m-t" label="是否需要登录" prop="isNeedLogin">
          <el-radio-group v-model="formData.isNeedLogin">
            <el-radio :label="false">不需要</el-radio>
            <el-radio :label="true">需要</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="footer">
      <el-button plain @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import { OUT_SIDE_TYPE } from '@/enum'
export default {
  name: 'addKongKimArea',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      dialogType: 'add',
      options: {
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      },
      id: '',
      formData: {
        outsideType: '',
        iconName: '',
        iconPoint: '',
        iconUrl: '',
        pointType: 1,
        iconSort: 99,
        isFixed: true,
        isEnable: true,
        isNeedLogin: false
      },
      outsideType: OUT_SIDE_TYPE,
      rules: {
        iconName: [{ required: true, message: '请输入图标名称', trigger: 'blur' }],
        iconUrl: [{ required: true, message: '请上传图标', trigger: 'change' }],
        iconPoint: [{ required: true, message: '请输入指定路径', trigger: 'blur' }],
        pointType: [{ required: true, message: '请选择是否指向路径', trigger: 'change' }],
        isEnable: [{ required: true, message: '请选择是否启用', trigger: 'change' }],
        isNeedLogin: [{ required: true, message: '请选择是否需要登录', trigger: 'change' }],
        iconSort: [{ required: true, message: '请输入排序位置', trigger: ['change', 'blur'] }],
        isFixed: [{ required: true, message: '请选择是否固定入口', trigger: ['change', 'blur'] }]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    const { dialogType, id } = this.$route.query
    if (dialogType) this.dialogType = dialogType
    if (id) this.id = id
    if (this.dialogType === 'edit') {
      this.handleDetails()
    }
  },
  mounted() {},
  destroyed() {},
  methods: {
    //获取金刚区详情
    handleDetails() {
      this.$http.finish.getKongKimAreaInfo(this.id).then(res => {
        if (res.status === 200) {
          this.formData = { ...this.formData, ...res.data }
          if (this.formData.pointType !== 3) this.formData.outsideType = ''
        }
      })
    },
    //确定
    handleConfirm() {
      if (this.formData.pointType === 2 && !this.formData.iconPoint) {
        return this.$message.warning('请填写指向路径')
      } else if (this.formData.pointType === 3 && !this.formData.outsideType) {
        return this.$message.warning('请选择第三方平台')
      } else if (
        this.formData.pointType === 3 &&
        this.formData.outsideType &&
        !this.formData.iconPoint
      ) {
        return this.$message.warning('请填写指向路径')
      }
      this.$refs.elForm.validate(valid => {
        if (valid) {
          this.formData.iconPoint = this.formData.pointType === 1 ? '' : this.formData.iconPoint
          if (this.formData.pointType !== 3) delete this.formData.outsideType
          const api =
            this.dialogType === 'add'
              ? this.$http.finish.addKongKimArea
              : this.$http.finish.updateKongKimArea
          const msg = this.dialogType === 'add' ? '新增成功' : '编辑成功'
          let loading = this.$loading(this.options)
          api(this.formData)
            .then(res => {
              if (res.status === 200) {
                this.$message.success(msg)
                this.handleCancel()
                loading.close()
              } else {
                this.$message.error(res.msg)
                loading.close()
              }
            })
            .catch(e => {
              loading.close()
            })
        }
      })
    },
    // 上传门店头像
    handleAvatarUrlResponse(response) {
      return response.data.url
    },
    uploadAvatarUrlChange() {
      if (this.formData.iconUrl) {
        this.$refs.elForm.clearValidate('iconUrl')
      }
    },

    //取消
    handleCancel() {
      this.$router.go(-1)
    },

    //只能输入英文和特殊字符
    urlChange(val) {
      val = val.trim()
      this.formData.iconPoint = val.replace(/^[\u4e00-\u9fa5]+$/, '')
    },

    //如果切换是否指定路径 清空路径数据
    handleChange() {
      this.formData.iconPoint = ''
      this.formData.outsideType = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.explain {
  display: block;
  color: #b0b0b0;
  font-size: 12px;
}
</style>
